<!DOCTYPE html>
<!--
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
	<meta charset="utf-8">
	<title>Placeholder Plugin &mdash; CKEditor Sample</title>
	<script src="../../../ckeditor.js"></script>
	<script src="../../../dev/console/console.js"></script>
	<script src="../../../dev/console/focusconsole.js"></script>
	<script src="../../widget/dev/console.js"></script>
	<script src="../../../samples/sample.js"></script>
	<link rel="stylesheet" href="../../../samples/sample.css">
</head>
<body>
	<h1 class="samples">Placeholder Plugin</h1>

	<h2>Classic (iframe-based) Sample</h2>
	<textarea cols="80" id="editor1" name="editor1" rows="10">
		&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;
	</textarea>

	<h2>Inline Sample</h2>
	<div id="editor2" contenteditable="true" cols="10" rows="10">
		<p>This is a [[sample placeholder]]. You are using <a href="http://ckeditor.com/">CKEditor</a>. </p>
	</div>

	<h2>Div Editing Area Sample</h2>
	<textarea cols="80" id="editor3" name="editor3" rows="10">
		&lt;p&gt;This is a [[sample placeholder]]. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;. &lt;/p&gt;
	</textarea>

	<script>

		CKEDITOR.replace( 'editor1', {
			extraPlugins: 'placeholder',
			height: 100
		} );

		CKEDITOR.inline( 'editor2', {
			extraPlugins: 'placeholder',
			height: 100
		} );

		CKEDITOR.replace( 'editor3', {
			extraPlugins: 'placeholder,divarea',
			height: 100
		} );

		CKCONSOLE.create( 'widget', { editor: 'editor1' } );
		CKCONSOLE.create( 'focus', { editor: 'editor1' } );
		CKCONSOLE.create( 'widget', { editor: 'editor2' } );
		CKCONSOLE.create( 'focus', { editor: 'editor2' } );
		CKCONSOLE.create( 'widget', { editor: 'editor3' } );
		CKCONSOLE.create( 'focus', { editor: 'editor3' } );

	</script>
</body>
</html>
